Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New component library #1

Merged
merged 80 commits into from
Jul 25, 2023
Merged

Conversation

jonathan-waarneming-nl
Copy link
Collaborator

@jonathan-waarneming-nl jonathan-waarneming-nl commented Jul 3, 2023

Create a component library, so we can reuse components and maintain consistency across ObsIdentify and the Observation app.

Resolves: https://github.com/observation/app/issues/7

@jonathan-waarneming-nl jonathan-waarneming-nl marked this pull request as ready for review July 11, 2023 11:58
@SjaakSchilperoort
Copy link
Member

Alles rondom vertalingen kan nu toch weg?

Copy link
Collaborator Author

@jonathan-waarneming-nl jonathan-waarneming-nl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nog 3 commits gedaan, met de wijzigingen die we hebben besproken + nog een paar kleine nieuwe.

import React, { useState } from 'react'
import { View } from 'react-native'

// @ts-ignore
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deze moest toegevoegd worden omdat het problemen gaf bij het runnen van tsc binnen de observation-app.

@@ -0,0 +1,3 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

De 4 plugins die wel worden gebruikt bij ObsIdentify, konden hier weg.

jest.config.js Outdated Show resolved Hide resolved
src/components/ProgressBarList.tsx Outdated Show resolved Hide resolved
* we override the overflow property with our own overflow type
*/
type FontStyle = TextStyle & { overflow?: 'visible' | 'hidden' | undefined } & {
[k in MixedSizeCSSPropertiesKeys]?: number | string
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hier voeg ik [k in MixedSizeCSSPropertiesKeys]?: number | string toe zodat de typing weer klopt voor h1, h2 en h3 typing in src/styles/html.ts. Die was veranderd door DimensionValue.

disabled={button!.disabled || false}
secondary={button!.secondary || false}
title={button!.title}
key={i}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

De key was eerst de title, maar in de unit test "Message - Rendering - Without title" kregen we deze foutmelding:
Warning: Each child in a list should have a unique key prop.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normaal gesproken bad practice. De key moet corresponderen met het item zelf, niet met de plek van het item in de lijst. Maar als je identieke LargeButtonProps[] kan doorgeven, dan heb je geen info om een unieke key te maken.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In https://www.reactnative.express/react/lists_and_keys:
This silences the warning from React about forgetting to include keys, but remember that doing this will cause React to identify elements incorrectly if the data is modified: for example, if a new item is inserted at the front of the list, it will get key '0', which previously belonged to another item. So you may be better off assigning identifiers or indexes to your data set if you can.

Good to know!

Copy link
Member

@SjaakSchilperoort SjaakSchilperoort left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nog een paar opmerkingen.

__mocks__/react-native-localize.js Outdated Show resolved Hide resolved
jest.config.js Outdated Show resolved Hide resolved
@types/assets/index.d.ts Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
src/components/ProgressBarList.tsx Outdated Show resolved Hide resolved
src/styles/font.ts Outdated Show resolved Hide resolved
@SjaakSchilperoort
Copy link
Member

Na deze PR hebben we nog 2 user stories nodig, maar die zijn nog niet urgent:

  • Via de context overridable definities voor theme, font en text styles maken
  • ObsIdentify baseren op deze component library.

Copy link
Member

@SjaakSchilperoort SjaakSchilperoort left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mooi zo.

Het lijkt me goed om na de merge naar develop ook een merge naar master te doen, dan master een tag te geven met het versienummer, en dan in de observation deze tag toe te voegen aan de URL in package.json. Op die manier kunnen we voor de Observation app upgrades van de component-library doen zonder ObsIdentify te raken, en andersom.

disabled={button!.disabled || false}
secondary={button!.secondary || false}
title={button!.title}
key={i}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normaal gesproken bad practice. De key moet corresponderen met het item zelf, niet met de plek van het item in de lijst. Maar als je identieke LargeButtonProps[] kan doorgeven, dan heb je geen info om een unieke key te maken.

@jonathan-waarneming-nl jonathan-waarneming-nl merged commit 7960f59 into develop Jul 25, 2023
1 check passed
@jonathan-waarneming-nl
Copy link
Collaborator Author

Na deze PR hebben we nog 2 user stories nodig, maar die zijn nog niet urgent:

  • Via de context overridable definities voor theme, font en text styles maken
  • ObsIdentify baseren op deze component library.

Ik heb https://github.com/observation/obsidentify/issues/858 en https://github.com/observation/app/issues/20 aangemaakt

Tevens tag v1.0.0 aangemaakt die (volgens mij) naar de laatste commit in master leidt.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants